<template>
  <div>
    <a-form-model ref="ha_departForm" :rules="rules" :model="ha_depart">
      <a-form-model-item
        v-if="!isAdd"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        label="上级部门"
        prop="parent"
        has-feedback
      >
        <a-input allow-clear :value="parentName" disabled />
      </a-form-model-item>
      <a-form-model-item
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        label="部门名称"
        prop="name"
        required
        has-feedback
      >
        <a-input allow-clear v-model="ha_depart.name" :maxLength="255" placeholder="请输入部门名称" />
      </a-form-model-item>
      <a-form-model-item
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        label="排序"
        prop="sequence"
        required
        has-feedback
      >
        <a-input allow-clear v-model="ha_depart.sequence" placeholder="请输入排序" />
      </a-form-model-item>
      <a-form-model-item>
        <div style="text-align: center">
          <a-input type="hidden" :disabled="true" v-model="ha_depart.id" />
          <a-button v-if="isAdd" :style="{ marginRight: '8px' }" icon="close" @click="onClose"> 关闭 </a-button>
          <!-- <a-button :style="{ marginRight: '8px' }" icon="reload" @click="resetForm"> 重置 </a-button> -->
          <a-button type="primary" @click="onSubmit" icon="save" :loading="loading"> 保存 </a-button>
        </div>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>
<script>
/* eslint-disable */
import { saveHa_depart, viewHa_depart } from '@/api/base/ha_depart'
export default {
  data() {
    return {
      labelCol: { span: 4 }, // label宽
      wrapperCol: { span: 20 }, // 组件宽
      loading: false, //按钮显示
      ha_depart: {
        id: '',
        name: '',
        sequence: '',
        deleted: '0',
        parent: '',
      }, //部门信息
      parentName: '', // 上级部门名称
      isAdd: false, // 是否添加
      rules: {
        name: [{ required: true, message: '请输入部门名称!', trigger: 'change' }],
        sequence: [
          { required: true, message: '请输入排序!', trigger: 'change' },
          { pattern: /^[0-9]*$/, message: '请输入整数!', trigger: 'change' },
        ],
      },
    }
  },
  created() {},
  methods: {
    /**
     * 调用父组件的方法收起抽屉
     */
    onClose() {
      this.$emit('close')
    },
    /**
     * 提供给父组件调用
     * 查询用户信息
     */
    findHa_departById(id) {
      this.resetForm()

      viewHa_depart(id).then((res) => {
        this.ha_depart = res.data
        /**
         *  枚举如果不能显示中文打开下面的代码
         */
      })
    },
    /**
     * 重置表单
     */
    resetForm() {
      this.$refs.ha_departForm.resetFields()
    },
    /**
     * 提交表单
     */
    onSubmit() {
      this.$refs.ha_departForm.validate((valid) => {
        this.loading = true
        if (valid) {
          delete this.ha_depart.primaryKey
          console.log('submit!', this.ha_depart)
          const savem = this.$message.loading('数据正在保存中...', 0)
          saveHa_depart(this.ha_depart).then((res) => {
            if (res.code !== 0) {
              setTimeout(savem, 0)
              this.$message.error('部门保存失败')
              this.loading = false
            } else {
              setTimeout(savem, 0)
              this.$message.success('保存成功')
              this.$emit('reloadList')
              this.$emit('close')
              this.loading = false
            }
          })
        } else {
          this.loading = false
          // 加延时器的目的是为了vue实例更新未完成，我们可能获取DOM失败的问题
          // 利用原生js的方式，获取所有失败的类名，获得一个数组，取第一个元素获取焦点
          setTimeout(() => {
            const isError = document.getElementsByClassName('has-error')
            const input = isError[0].querySelector('input')
            //console.log(input)
            if (input !== null && input !== 'undefind' && input !== '') {
              isError[0].querySelector('input').focus()
                ? isError[0].querySelector('input').focus()
                : isError[0].querySelector('input').click()
            } else {
              isError[0].querySelector('textarea').focus()
            }
          }, 10)
          return false
        }
      })
    },
  },
}
</script>
<style scoped>
</style>